import Taro, { Component } from '@tarojs/taro';
import { View, Text ,Image,Label } from '@doctorwork/components';
import { AtTabs, AtTabsPane } from 'taro-ui';
import { connect } from '@tarojs/redux';
import Navigate from '../../components/Navigate/index';
import { rewriteAddMTA } from '../../model/utils/rewrite';
import SelectCar from '../../components/selectCar/index';
import mockData from './mock.json';
import './index.styl';
import Empty from '../../components/Empty';

@connect(({ consumption }) => ({
    ...consumption
}))
@rewriteAddMTA
export default class recordList extends Component {
    config = {
        navigationBarTitleText: '消费记录',
        'navigationBarBackgroundColor': '#00c365',
        'navigationBarTextStyle': 'white'
    };

    constructor(props){
        super(props);
        this.state = {
            showCarSelect: false,
            currentTab: 0,
            tabList : [{ title: '保养项目' }, { title: '保养记录' }]
        };
    }

    componentDidShow() {
        const carNumber = wx.getStorageSync('carNumber')||'';
        if(carNumber){
            this.props.dispatch({
                type : 'consumption/init',
                payload: {carNumber}
            });
        }
        this.props.dispatch({
            type : 'consumption/getCarList',
            payload: {carNumber}
        });
    }

    jumpAdd(){
        this.props.dispatch({
            type : '$router/forward',
            payload : {
                url : '/pages/createMaintain/index',
            }
        });
    }
    jumpDetail(id){
        if(id == -1){
            wx.showToast({
                title: '请先添加数据',
                icon: 'none'
            });
            return;
        }
        this.props.dispatch({
            type : '$router/forward',
            payload : {
                url : `/pages/record/index?id=${id}`,
            }
        });
    }
    /**
     * 修改tab
     * @param {*} value 
     */
    handleTabChange (value) {
        this.setState({
            currentTab: value
        });
    }

    /**
     * 选择了车辆
     * @param {*} carNumber 
     */
    onCarSelected(carNumber){
        if(carNumber){

            this.props.dispatch({
                type : 'consumption/init',
                payload: {carNumber}
            });
        }
        this.setState({showCarSelect: false});
    }
    addCar(){
        this.props.dispatch({
            type : '$router/forward',
            payload : {
                url : '/pages/car/index',
            }
        });
    }

    /**
     * 取消选择车辆
     */
    onCarCancel(){
        this.setState({showCarSelect: false});
    }
    /**
     * 添加记录
     */
    addRecord(){
        wx.navigateTo({
            url: '/pages/record/index',
        });
    }
    /**
     * 打开选择车辆弹窗
     */
    openCarModal(){
        const {carNumber} = this.props;
        if(!carNumber){
            wx.navigateTo({
                url: '/pages/car/index'
            });
        }else{
            this.setState({showCarSelect: true});
        }
    }
    render() {
        const {list,userData,duration,carNumber,carList,totalPrice} = this.props;
        const {showCarSelect,tabList,currentTab} = this.state;
        const hasData = !!list&&list.length;
        const dataList = hasData ? list: mockData;
        return (
            <View className='container'>
                <Navigate
                    title='日常消费记录'
                    color='white'
                    backgroundColor='#00c365'
                    backTextColor='white'
                />
                
                <View className='header'>
                    {
                        showCarSelect && <SelectCar carList={carList} carNumber={carNumber} onCarSelected={this.onCarSelected.bind(this)} onClose={this.onCarCancel.bind(this)} />
                    }
                    <View className='car-name'>
                        {
                            carNumber ? <View className='car-number' onClick={this.openCarModal.bind(this)} data-name={carNumber}>{carNumber}</View> : <View className='car-number' onClick={this.addCar.bind(this)} data-name='暂无车辆'>暂无车辆</View>
                        }
                        
                        {
                            carNumber && <Label className='car-exchange' onClick={this.openCarModal.bind(this)} data-name='切换'>切换 ></Label>
                        }
                        
                    </View>
                    <View className='total_price'>累计消费： {totalPrice}元</View>
                </View>
                {
                    dataList ? <View className='content'>

                        {
                            !hasData && <View className='example-text'>以下为示例数据，添加数据后会自动隐藏</View>
                        }
                        <View className={hasData ? '':  'blur'}>
                            {
                                dataList.map(data => (<View key={data.month}>
                                    <View className='oil-title'>
                                        <Label className='month'>{data.month}</Label>
                                        <Label className='total'>月度消费：{data.total}元</Label>
                                    </View>
                                    <View className='oil-list'>
                                        {
                                            data.list.map((item,index) => (
                                                <View key={index} className='oil-items'>
                                                    <View className='oil-step'>
                                                        <View className='oil-dot'></View>
                                                    </View>
                                                    <View className='oil-item'  onClick={this.jumpDetail.bind(this,item.id)} data-name='查看详情' data-id={item.id}>
                                                        <View  >
        
                                                            <View className='oil-carNumber'>{item.recordType}</View>
                                                            <View className='oil-time'>金额：{item.price} 元</View>
                                                            <View className='oil-time'>时间：{item.timeStr}</View>
                                                            <View className='oil-time'>备注：{item.desc || '-'}</View>
                                                        </View>
                                                        <View >
                                                            <View className='oil-detail' >查看详情<Text className='iconfont icon-right'>&#xe658;</Text></View>
                                                        </View>
                                                
                                                    </View>
                                                </View>
                                            ))
                                        }
                                    </View>
                                </View>))
                            }
                        </View>








                        <View className='no-more'>暂无更多数据~</View>
                    </View>: <View className='empty'>
                        <Empty />
                    </View>
                }
                <View className='footer'>
                    <View className='add-record' onClick={this.addRecord.bind(this)} data-name='添加记录'>添加记录 </View>
                </View>
                
            </View>

        );
    }
}
